<template>
	<view class="content mainpadding" v-if="pageShow">
		<view class="mainpadding ffffff">
			<view class="flexleft" @click="jumpdetail('/pages_index/shopInfo?id=',orderInfo.shop_id)">
				<image class="shopImg margin_right1" src="/static/images/order/shop.png" mode=""></image>
				<view class="text_x color_ling margin_right1">{{orderInfo.shop.name}}</view>
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
			
			<view class="flexbetween margin_top">
				<view class="flex">
					<image class="shopInfoImg" src="/static/images/index/phone.png" mode=""></image>
					<view class="color_san text_five">{{orderInfo.shop.shopmbl}}</view>
				</view>
				<view class="flexleft">
					<view class="margin_right4 text" @click.stop="daohang(orderInfo.shop.address)">
						<image class="shopPhone" src="/static/images/index/navigation.png" mode=""></image>
						<view class="text_pee color_san">導航</view>
					</view>
					<view class="text" @click.stop="phone(orderInfo.shop.shopmbl)">
						<image class="shopPhone" src="/static/images/index/phoneShop.png" mode=""></image>
						<view class="text_pee color_san">電話</view>
					</view>
				</view>
			</view>
			<view class="flexleft margin_top">
				<image class="shopInfoImg" src="/static/images/index/address.png" mode=""></image>
				<view class="color_san text_five">{{orderInfo.shop.address}}</view>
			</view>
		</view>
		
		<!-- 商品 -->
		<view class="margin_top border2 ffffff mainpadding">
			<view class="flexleft">
				<image :src="orderInfo.shoptable.image_text" class="goodsImg margin_right3" mode=""></image>
				<view class="flexcolumnbet" style="width: 100%;height: 157rpx;">
					<view class="xiaohei titletext">{{orderInfo.shoptable.num}}  <text style="font-size: 26rpx;" class="xiaolan margin_left2">{{(orderInfo.house_name && orderInfo.shoptable.num!=orderInfo.house_name)?orderInfo.house_name:""}}</text></view>
					<view class="flexleft">
						<view class="" v-for="(ite,itedex) in orderInfo.gg_content_text" :key="itedex">
							<text class="xiaohui" style="color: #00a0e9;" v-for="(it,itdex) in ite.content" :key="itdex">
								<text class="margin_right1" v-show="it.num!=0">{{it.name}}*{{it.num}}</text>
							</text>
						</view>
					</view>
					<view class="flexbetween" style="width: 100%;">
						<view class="xiaohong main_size">${{orderInfo.pay_price}}</view>
						<view class="xiaohui main_size">{{orderInfo.days}}晚 *{{orderInfo.house_num}}閒</view>
					</view>
				</view>
			</view>
		</view>
		
		
	
		
		<!-- 訂單規格 -->
		<view class="margin_top border2 ffffff mainpadding">
			
			
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">入住時間</view>
				<view class="text_a color_six">{{orderInfo.start_date_text}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">結束時間</view>
				<view class="huang_text text_a">{{orderInfo.start_date_text}}</view>
			</view>
		
		</view>
		
		
		<view class="footer">
			<view class="footerButton" @click="submit">確定</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				id: "", //訂單id
				orderInfo: {},
				pageShow: false,
				showConfirm: false,
				text: "",
				images: [],
				images_text: [],
				currentid: "",
				pzshow: false,
				submit_bool:true
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			
			
			submit(){
				let _this=this;
				if(!_this.submit_bool){
					return false;
				}
				_this.submit_bool=false;
				this.http.request('/api/hotel/joinHotelInfo', 'GET', {
					id: _this.id,
				}).then(res => {
					_this.http.toast(res.msg);
					if (res.code == 1) {
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/index/index"
							})
						},500)
					} else {
						_this.submit_bool=true;
					}
				})
			},
			
		
	
	
		
		
		

			
			getInfo() { //訂單詳情
				let _this = this
				this.http.request('/api/hotel/rzDetail', 'GET', {
					id: this.id,
				}).then(res => {
					if (res.code == 1) {
						this.orderInfo = res.data
						this.pageShow = true
					} else {
						this.http.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-transition {
		z-index: 10 !important;
	}

	.listleftimg1 {
		width: 150rpx;
		min-width: 150rpx;
		height: 150rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding-bottom: 150rpx;
	}

	.shopImg {
		width: 26.62rpx;
		height: 24rpx;
		min-width: 26.62rpx;
	}

	.contactShop {
		width: 132rpx;
		height: 51rpx;
		line-height: 51rpx;
		text-align: center;
		background: rgba(255, 196, 0, 0.1);
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		border: 1rpx solid #FFB800;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		min-width: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

		.shipment {
			// width: 71rpx;
			// height: 30rpx;
			// line-height: 30rpx;
			padding: 4rpx;
			box-sizing: border-box;
			text-align: center;
			background: #13C463;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.greyBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(102, 102, 102, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.orangeBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(255, 92, 0, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.popupBox {
		width: 660rpx;
		padding: 50rpx 50rpx 0;
		box-sizing: border-box;
	}

	::v-deep.u-steps-item__content {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 50rpx;
		flex: 1;
	}

	::v-deep.u-text:nth-child(2) {
		justify-content: flex-end !important;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
		height: 203rpx;
		padding: 30rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EFEFEF;
	}
	.shopInfoImg {
		width: 38rpx;
		height: 38rpx;
	}
	.shopPhone {
		width: 52rpx;
		min-width: 52rpx;
		height: 52rpx;
	}
	.joininfotitle{
		padding: 10rpx 10rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}
	.codeImage{
		
		justify-content: center;
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
	}
	.codeImageItem{
		width: 200rpx;
		height: 200rpx;
		
	}
	.joininfoitem{
		margin-bottom: 10rpx;
	}
	
	.shareBtn {
		border-radius: 30rpx;
		padding: 5rpx 25rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
		border: 1rpx solid #FF5C00;
		background-color: red;
	}
</style>